import React from 'react'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

import * as router from 'react-router-dom'
import Home from '@/views/home'
import About from '@/views/about'
import AboutDetail from '@/views/about/detail'

console.log('router', router)
const Layout = () => (
  <BrowserRouter>
    <div>
      <nav className='mb-30px'>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/about/detail">AboutDetail</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/about/detail" element={<AboutDetail />} />
      </Routes>
    </div>
  </BrowserRouter>
)

export default Layout
